
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../ico/logo.ico" type="image/x-icon" />
    <title>协同办公</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../../static/css/bootstrap.css">
    <link rel="stylesheet" href="../../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/font.css">
    <style>
        #boxes{
            width: 98%;
            display: flex;
            flex-direction: row;

        }
        #boxes>div{
            margin-left: 5%;
        }
        #left>a{
            margin-top:30px;
            margin-left: 20px;
            cursor: pointer;
        }
        #logo{
            margin-top: 20px;
            margin-left: 6%;
            height: 80px;
            display: flex;
            flex-direction: row;
        }
        #tiao{
            width: 100%;
            height: 50px;
            background-image: url("../../static/imaegs/breadbg.gif");
            display: flex;
            flex-direction: row;
        }
        #right{
            margin-top: 10px;
            margin-left: 20%;

        }
        #from_block{
            width: 80%;
            margin-left: 10%;

        }
        #left{
            margin-left: 10%;
            margin-top: 10px;
        }

        #logo-img{
            width:150px;
            height: 93px;
        }
        #logo-img>img{
            width: 90%;
        }

        label{
            margin-left: 5px;
            font-size: 9px;

        }

        #file_box{
            width: 120px;
            height: 120px;
        }

        #time{
            float: right;
            margin-right: 50px;
            font-size: 9px;
        }
        #overTime{
            color: red;
            font-size: 9px;
            float: right;
            margin-right: 5px;
        }

        #file,#but{
            float: right;
            margin-right: 10px;
            margin-top: 8px;
        }
        #file-form{
            display: none;
        }

    </style>
</head>
<body>
<div id="logo"><div id="logo-img"><img src="../../static/imaegs/logo/logo2.png"></div>

</div>
<div id="tiao">
    <div id="left"><a href="index.php"><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe68e;</i>&nbsp;首页</a>
        <a href="task_list.php" style="border-bottom: 2px blue solid"> <i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe6b2;</i>&nbsp;我的任务</a>
        <a href="file.php"><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe621;</i>&nbsp;我的文件</a>
        <a href="user_list.php"><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe613;</i>&nbsp;成员信息</a></div>
    <div id="right"><a style="color:grey">您好！&nbsp;</a><i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe66f;</i><a href="">个人中心</a>&nbsp;&nbsp;<a href="../loginU.html">退出</a></div>
</div>

<div id="from_block">

    <hr class="layui-bg-blue">
    <div class="layui-row layui-col-space15" >
        <div class="layui-col-md12" id="uul">

        </div>
    </div>
    <form action="" enctype="multipart/form-data" method="post" id="file-form">
        <a class="opts_btn" href="JavaScript:void(0)">
            <input  name="myFile" class="oFile" id="oFile"  onchange="FileChangeFn(event)" type="file">
        </a>
        <label id="file_size"></label><br><br>
        <div id="file_box"></div>
        <div class="speed_box">
            <div id="speed">0%</div>
        </div>
        <label id="file_type"></label>
        <button class="layui-btn" onclick="UploadFileFn()" type="button">开始上传文件</button>
        <div class="clear"></div> <input style="display: none" class="hui-input" id="url" name="url"  type="text">
        <br><hr>温馨提示：附件允许的大小为20m<br>
    </form>
    <br>
</div>
<hr>
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/layui/layui.all.js"></script>
<script>
    var url = location.search;
    var id = url.split("=")[1];
    $.ajax({
        type: 'post',
        cache: false,
        url: '../../php/user/select_task_id.php?id='+id,
        data: {

        },
        dataType: 'json',
        success: function (data) {
            $coun = data.count;
            $dat = data.data;

            for ($i = 0; $i < $coun; $i++) {
                $id = $dat[$i].id;
                $user = $dat[$i].task_admin;
                $title=$dat[$i].title;
                $time=$dat[$i].time_over;
                $task_a=$dat[$i].task_a;
                $user_a=$dat[$i].user_a;
                $remark=$dat[$i].remark;
                $complete=$dat[$i].complete;
                $content=$dat[$i].task_content;
                $addtime=$dat[$i].task_time;
                $file=$dat[$i].file;
                $file_time=$dat[$i].file_time;
                $url=$dat[$i].url;
                var li_id = $id;
                $li = $("<div id="+$id+" class=\"layui-card\" id=\"card\">\n" +"<hr class=\"layui-bg-red\">"+
                    "<div class=\"layui-card-header\">"+"任务详情："+"  <a id='file' type='button' class=\"layui-btn layui-btn-danger layui-btn-xs\" onclick='fileUpload("+$id+")' >"+"上传文件"+"</a>"+" <a id='but' class=\"layui-btn layui-btn-primary layui-btn-xs\" onclick='over("+$id+")'>"+"完成任务"+"</a>"+"<button id='but' class=\"layui-btn layui-btn-xs\" >"+"<a href='"+$url+"' download='file' style='color: white'>"+"附件下载"+"</a>"+"</button>"+"<a id='overTime'>"+"任务截至时间："+$time+"</a>"+"<a id='overTime'>"+"任务完成时间："+$complete+"</a>"+"<a>"+"</a>"+"</div>" +
                    "                    <div class=\"layui-card-body\">\n" +$content+"<br>" +
                    "<hr>"+"<div class=\"layui-card-header\">"+"任务："+"<a id='overTime'>"+"接受任务的成员："+$user_a+"</a>"+"</div>"+
                    $task_a+
                    "<br>"+"<div class=\"layui-card-header\">"+"备注："+"</div>"+
                    $remark+"<br>"+
                    "                       <span id=\"time\">"+ "发布时间："+$addtime+"&nbsp;|&nbsp;"+"发布人："+$user+"</span>" +
                    "                          <hr>\n" +
                    "<div class=\"layui-card-header\">"+"文件资料"+"<button id='but' class=\"layui-btn layui-btn-xs\" >"+"<a href='"+$file+"' download='' style='color: white'>"+"下载文件"+"</a>"+"</button>"+"<a id='overTime'>"+"上传文件的时间："+$file_time+"</a>"+"<a>"+"</a>"+"</div>" +
                    "                    </div>\n" +
                    "                </div>");
                $("#uul").append($li);

            }
        },
        error: function (data) {
            layer.msg("获取数据异常");
        }
    });
    function over(id) {
        layer.confirm('您确定已经完成任务并上传了文件吗？', function(index) {
            $.ajax({
                type: 'post',
                cache: false,
                url: '../../php/user/update_time.php',
                data: {
               "id":id,
                },
                dataType: 'json',
                success: function (data) {
                    layer.msg(data.message);
                },
                error: function (data) {
                    layer.msg("更新状态失败");
                }
            });


        });


    }
function fileUpload(id) {
    var form=document.getElementById("file-form");
           form.style.display="block";
}
    var uploadUrl = '../../php/user/upload_user.php?id='+id;
    function FileChangeFn(event) {
        $('.opst_txt').text('重新选择文件');
        $('.send_btn').show();
        var event = event || window.event,
            dom = '',
            ofile = $("#oFile").get(0).files[0],
            otype = ofile.type || '获取失败',
            osize = ofile.size / 1054000,
            ourl = window.URL.createObjectURL(ofile); //文件临时地址
        $('#file_type').text("选择上传文件类型：" + otype);
        $('#file_size').text("选择上传文件大小，共" + osize.toFixed(2) + "MB。");

        console.log("文件类型：" + otype); //文件类型
        console.log("文件大小：" + osize); //文件大小

        if ('video/mp4' == otype || 'video/avi' == otype || 'video/x-msvideo' == otype) {
            layer.msg("请上传压缩文件/或者图片");
        }
        if ('audio/mp3' == otype || 'audio/wav' == otype || 'audio/x-m4a' == otype) {
            layer.msg("请上传压缩文件/或者图片");
        }
        if ('image/jpeg' == otype || 'image/png' == otype || 'image/gif' == otype) {
            dom = '<img id="photo"  width="100px" alt="我是image图片文件" src=' + ourl + ' title="" />';
        }
        if ('zip' == otype) {
            dom = '<img id="photo" width="100px" alt="我是压缩文件" src=' + ourl + ' title="" />';

            $('#file_box').html(dom);
        }
        ;
    }
    //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
    function OnProgRess(event) {
        var event = event || window.event;
        //console.log(event);  //事件对象
        console.log("已经上传：" + event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)
        //console.log(event.total);  //附件总大小(固定不变)
        var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比
        $("#speed").html(loaded + "%").css("width", loaded + "%");
    };

    //开始上传文件
    function UploadFileFn() {


        var file=document.getElementById("oFile");
        fileV=file.value;
        if(fileV===""){
            layer.msg("您还没有选择任何文件哦")
        }
        else {

            $('.speed_box').show();
            var oFile = $("#oFile").get(0).files[0], //input file标签
                formData = new FormData(); //创建FormData对象
            xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法)
            formData.append("myFile", oFile); //将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去

            $.ajax({
                type: "POST",
                url: uploadUrl, // 后端服务器上传地址
                data: formData, // formData数据
                cache: false, // 是否缓存
                async: true, // 是否异步执行
                processData: false, // 是否处理发送的数据  (必须false才会避开jQuery对 formdata 的默认处理)
                contentType: false, // 是否设置Content-Type请求头
                dataType: 'json',
                xhr: function () {
                    if (OnProgRess && xhr.upload) {
                        xhr.upload.addEventListener("progress", OnProgRess, false);
                        return xhr;
                    }
                },
                success: function (dat) {

                    $("#speed").html("上传成功");
                    layer.msg('上传成功');



                },
                error: function (dat) {
                    $("#speed").html("上传失败");

                    layer.msg('文件上传失败！');
                }
            });
        }
    };
</script>

</body>
</html>